<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户联系</el-breadcrumb-item>
                <el-breadcrumb-item>客户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <div style="display: flex;align-items: center;">
                <el-button type="primary" style="margin-right: 10px;" @click="ExportFile">导出客户资料</el-button>
            </div>
            <div style="margin-top: 20px;display: flex;align-items: center;flex-wrap: wrap;">
                <div style="display: flex;align-items: center;margin-right: 40px;">
                    <div style="margin-right: 10px;font-size: 16px;">标签</div>
                    <el-cascader :collapse-tags="true" :props="props" v-model="value" :options="tagsOptions" @change="handleChange" clearable></el-cascader>
                </div>
                <div style="display: flex;align-items: center;margin-right: 40px;">
                    <div style="margin-right: 10px;font-size: 16px;">添加人</div>
                    <el-select v-model="SelectValue" placeholder="请选择添加人" clearable @change="SelectAddStaff">
                        <el-option v-for="item in AddStaffList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div style="display: flex;align-items: center;margin-right: 40px;">
                    <div style="margin-right: 10px;font-size: 16px;">添加时间</div>
                    <el-date-picker style="width: 420px;" @change="DataPickerChanege" v-model="DataTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div style="display: flex;align-items: center;">
                    <el-input placeholder="请输入内容" style="width: 300px;" v-model="keyword" clearable></el-input>
                    <el-button icon="el-icon-search" size="small" type="primary" style="margin-left: 10px;" @click="SearchList">搜索</el-button>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button type="primary" size="mini" @click="EditItem(index)">详情</el-button>
                        </div>
                    </div>
                    <div slot="tags" slot-scope="row, index" style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;">
                        <el-tag effect="plain" v-for="(item,index) in row" :key="index">{{item.tag_name}}</el-tag>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
            </div>
        </div>
        <modal v-if="visible" :title="MadalTitle" v-model="visible" :width="1000" :centered="true" :maskClosable="false" :footer="null">
            <div>
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="12">
                            <div style="display: flex;align-items: flex-start;margin-bottom: 20px;margin-left: 100px;">
                                <img style="height: 50px;width: 50px;" :src="DetaileData.external_data.avatar" alt="">
                                <div style="margin-left: 12px;">
                                    <div style="font-size: 16px;color: #333;margin-bottom: 8px;">{{DetaileData.follow_data.remark}}</div>
                                    <div style="color: #999;">微信昵称:{{DetaileData.name}}</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="备注名:">
                                <span>{{DetaileData.follow_data.remark}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号:">
                                <span v-for="(item,index) in DetaileData.follow_data.remark_mobiles">{{item}},</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述:">
                                <span>{{DetaileData.follow_data.description}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="标签:">
                                <el-tag effect="plain" v-for="(item,index) in DetaileData.follow_data.tags" style="margin-right: 10px;" :key="index">{{item.tag_name}}</el-tag>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="添加人:">
                                <span>{{DetaileData.staff_nickname}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="添加时间:">
                                {{DetaileData.follow_data.createtime}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>

                        <el-col :span="12">
                            <el-form-item label="来源:">
                                <span>{{DetaileData.follow_data.add_way}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </modal>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'labelView',
        components: {
            pagination,
            Table,
            modal
        },
        data() {
            return {
                listData: [],
                MadalTitle: '客户详情',
                visible: false,
                labelPosition: 'right',
                selectedRowKeys: [],
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                tagsOptions: [], //标签联级
                props: { multiple: true },
                DetaileData: '', //详情信息
                DataTime: [], //时间选择器
                keyword: '', //搜索
                StartTime: '', //开始时间
                EndTime: '', //结束时间
                TagsIds: [], //标签集合
                AddStaffList: [],
                value: '',
                SelectValue: '',
            };
        },
        computed: {
            ...mapState({
                listfields: state => state.CustomerContact.fields,
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getTagsList()
            this.getStaffList()
            this.getList()
        },
        methods: {
            ...mapActions({
                GetFields: 'CustomerContact/GetFields',
            }),
            SelectAddStaff(value) {
                // console.log(value);
                var that = this
                that.getList()
            },
            // 搜索
            SearchList() {
                var that = this
                that.getList()
            },
            DataPickerChanege(value) {
                var that = this
                // console.log(value);
                if (value != null) {
                    that.StartTime = value[0]
                    that.EndTime = value[1]
                } else {
                    that.StartTime = ''
                    that.EndTime = ''
                }
                that.getList()
            },
            handleChange(value) {
                var that = this
                var arr = []
                value.forEach((item, index) => {
                    if (item != '') {
                        item.forEach((items, indexs) => {
                            if (items != '') {
                                arr.push(items);
                            }
                        })
                    }
                })
                that.TagsIds = arr
                that.getList()
            },
            EditItem(row) {
                var that = this
                // console.log(row);
                var data = {
                    qy_user_id: row.qy_user_id,
                    customer_user_id: row.customer_user_id,
                }
                that.getDetaile(data)
            },
            getDetaile(row) {
                var that = this
                var params = {
                    qy_user_id: row.qy_user_id,
                    customer_user_id: row.customer_user_id,
                }
                that.$http.post('api/admin/qywx/Index/getCustomerInfo', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        that.DetaileData = res.data
                        that.visible = true
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            getStaffList(row) {
                var that = this
                var params = {
                    is_qy: 1,
                    is_all: 0,
                    page: 1,
                    page_size: 100,
                }
                that.$http.post('api/admin/qywx/Index/getQyUserList', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        var data = res.data.data
                        if (data.length > 0) {
                            var arr = []
                            data.forEach((item, index) => {
                                var obj = {
                                    name: item.name,
                                    id: item.qy_wechat_id
                                }
                                arr.push(obj)
                            })
                            that.AddStaffList = arr
                            // console.log(that.AddStaffList);
                        } else {
                            that.AddStaffList = []
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            getTagsList() {
                var that = this
                var params = {}
                that.$http.post('api/admin/qywx/Index/TagList', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        var data = res.data
                        if (data.length > 0) {
                            var list = []
                            data.forEach((item, index) => {
                                // console.log(item);
                                var tags = item.tags
                                tags.forEach((items, indexs) => {
                                    items.value = items.qy_tag_id
                                    items.label = items.tag_name
                                })
                                var obj = {
                                    value: '',
                                    label: item.group_name,
                                    children: item.tags
                                }
                                list.push(obj)
                            })
                            // var all = {
                            //     value: '',
                            //     label: '全部',
                            //     children: [{
                            //         value: '',
                            //         label: '全部',
                            //     }]
                            // }
                            that.tagsOptions = list
                            // that.tagsOptions.unshift(all)
                        } else {
                            that.tagsOptions = []
                        }
                        // console.log(that.tagsOptions);
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            ExportFile() {
                var that = this
                var params = {
                    tag_ids: that.TagsIds, //标签集合
                    keyword: that.keyword, //搜索
                    start_at: that.StartTime, //开始时间
                    end_at: that.EndTime, //结束时间
                    qy_user_id: that.SelectValue
                }
                const token = localStorage.getItem("liankun_user") ? localStorage.getItem("liankun_user") : "";
                const user_id = localStorage.getItem('user_id') ? localStorage.getItem("user_id") : "";
                axios({
                    method: 'GET',
                    url: 'api/admin/qywx/Index/ExportCustomerList',
                    params: params,
                    responseType: 'blob',
                    headers: {
                        'access-token': token,
                        'user-id': user_id,
                        'Authorization': token
                    }
                }).then(res => {
                    let a = document.createElement('a');
                    //ArrayBuffer 转为 Blob
                    let blob = new Blob([res], { type: "text/csv" });
                    let objectUrl = URL.createObjectURL(blob);
                    a.setAttribute("href", objectUrl);
                    a.setAttribute("download", '客户列表.csv');
                    a.click();
                }).catch(err => {
                    console.log(err)
                })
            },
            getList() {
                var that = this
                var params = {
                    page: that.page,
                    pagesize: that.pagesize,
                    tag_ids: that.TagsIds, //标签集合
                    keyword: that.keyword, //搜索
                    start_at: that.StartTime, //开始时间
                    end_at: that.EndTime, //结束时间
                    qy_user_id: that.SelectValue
                }
                that.$http.post('api/admin/qywx/Index/getCustomerList', params).then(res => {
                    if (res.code === 1) {
                        var data = res.data.data
                        that.total = res.data.count
                        var listData = []
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                // console.log(item);
                                var obj = {
                                    key: item.id,
                                    id: item.id,
                                    qy_user_id: item.staff_qy_user_id,
                                    customer_user_id: item.external_userid,
                                    userName: item.external_data.name,
                                    tags: item.follow_data.tags,
                                    addUser: item.staff_nickname,
                                    AddTime: item.follow_data.createtime,
                                    description: item.follow_data.description,
                                    add_way: item.follow_data.add_way,
                                    data: item
                                }
                                listData.push(obj)
                            })
                            that.listData = listData

                        } else {
                            that.listData = []
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },

            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getList()
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getList()
            },
            onSelectChange(selectedRowKeys) {
                // console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>